<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    </style>
</head>
<body>
<div>

    <div class="loading-bar" :class="nowStatus">
        <span class="press"></span>
    </div>

    <div class="app-init">
        <transition :name="transitionName">
            <router-view></router-view>
        </transition>
    </div>


    <footer class="footer clear" :class="{ 'leave': leaveComp }">
        <div class="footer-item" :class="{ 'active': isActive('home') }" @click="open('/home')">
            <p class="icon">
                <span class="iconfont icon-shouye"></span>
            </p>
            <p class="name">首页</p>
        </div>

        <div class="footer-item" :class="{ 'active': isActive('classification') }" @click="open('/classification')">
            <p class="icon">
                <span class="iconfont icon-fenlei"></span>
            </p>
            <p class="name">分类</p>
        </div>

        <div class="footer-item shop-car" :class="{ 'active': isActive('shoppingcart') }" @click="open('/shoppingcart')">
            <p class="icon">
                <span class="iconfont icon-gouwuche"></span>
            </p>
            <p class="name">购物车</p>
            <span class="num" v-show="getShopCarLength > 0" :class="{ 'full': parseInt(getShopCarLength) >= 99 }" >{{ getShopCarLength >= 99 ? '99+' : getShopCarLength }}</span>
        </div>

        <div class="footer-item" :class="{ 'active': isActive('mine') }" @click="open('/mine')">
            <p class="icon">
                <span class="iconfont icon-smile"></span>
            </p>
            <p class="name">我的</p>
        </div>
    </footer>

</div>
</body>
</html>
